<template>
  <edit-user :data="editData" @editFinish="fetchUserList" />
  <a-page-header title="用户管理" sub-title="管理考试用户" />
  <a-space>
    <a-button type="primary" @click="editUser(-1)">添加用户</a-button>
    <a-button type="primary" @click="goFirstPage">返回第一页</a-button>
    <a-input v-model:value="stuNumber" placeholder="请输入用户学号" />
    <a-button type="primary" @click="fetchUserList"> 刷新 </a-button>
  </a-space>
  <br /><br />
  <a-table
    :dataSource="userList"
    :columns="columns"
    rowKey="id"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template #duration="{ record }">
      <a-tag color="green">{{ record.duration }}秒</a-tag>
    </template>
    <template #action="{ record }">
      <a @click="editUser(record.id)">编辑</a>
      <a-divider type="vertical" />
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          更多操作
          <down-outlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="handleDeleteUser(record)"> 删除 </a-menu-item>
            <a-menu-item @click="handleResetPass(record)"> 重置密码 </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
  </a-table>
</template>

<script>
import { createVNode, defineComponent, onMounted, reactive, ref } from "vue";
import { DownOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { deleteUser, getAllUser, resetUserPass } from "../../utils/api";
import { message, Modal } from "ant-design-vue";
import EditUser from "../../components/admin/EditUser.vue";

export default defineComponent({
  setup() {
    const columns = [
      {
        title: "ID",
        dataIndex: "id",
      },
      {
        title: "学号",
        dataIndex: "stuNumber",
      },
      {
        title: "姓名",
        dataIndex: "name",
      },
      {
        title: "密码",
        dataIndex: "password",
      },
      {
        title: "操作",
        slots: { customRender: "action" },
      },
    ];
    const userList = ref([]);
    const loading = ref(true);
    const stuNumber = ref("");
    const editData = reactive({
      visible: false,
      userId: 0,
    });
    const pagination = reactive({
      showTotal: (total) => `共有 ${total} 条数据`,
      total: 0,
      current: 1,
      pageSize: 0,
    });
    const goFirstPage = () => {
      pagination.current = 1;
      fetchUserList();
    };
    const fetchUserList = async () => {
      loading.value = true;
      let result = await getAllUser(pagination.current, stuNumber.value);
      pagination.total = result.data.data.total;
      pagination.pageSize = result.data.data.size;
      userList.value = result.data.data.records;
      loading.value = false;
    };
    const handleTableChange = (pag) => {
      pagination.current = pag.current;
      fetchUserList();
    };
    const handleDeleteUser = (record) => {
      Modal.confirm({
        title: "提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {}, [
          createVNode("p", {}, "删除用户将导致其所有信息被删除"),
          createVNode("p", {}, `将删除姓名为【${record.name}】的用户,请确认`),
        ]),
        onOk() {
          deleteUser(record.id).then((res) => {
            message.success(res.data.message);
            fetchUserList();
          });
        },
      });
    };
    const editUser = (id) => {
      editData.userId = id;
      editData.visible = true;
    };
    const handleResetPass = (record) => {
      Modal.confirm({
        title: "提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {}, [
          createVNode("p", {}, "此操作将重置用户密码"),
          createVNode("p", {}, `将为姓名为【${record.name}】的用户重置密码为【123456】,请确认`),
        ]),
        onOk() {
          resetUserPass(record.id).then((res) => {
            message.success(res.data.message);
            fetchUserList();
          });
        },
      });
    };
    onMounted(() => {
      fetchUserList();
    });

    return {
      columns,
      userList,
      loading,
      pagination,
      stuNumber,
      editData,
      editUser,
      goFirstPage,
      fetchUserList,
      handleTableChange,
      handleDeleteUser,
      handleResetPass,
    };
  },
  components: {
    DownOutlined,
    EditUser,
  },
});
</script>
